<template>
  <view class="container">
    <view class="car-block">
      <view class="car-block_title"> {{ platoonCarInfo.licenseNo }} </view>
      <view class="car-block_desc">{{ platoonCarInfo.modelName }}</view>
      <view> 起始时间：{{ platoonCarInfo.startDate }} </view>
    </view>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <view v-for="record in dataSource" :record="record" :key="record.id">
          <OrderItem :value="activedOrder && activedOrder.id == record.id" :record="record" @click="toSelect(record)"></OrderItem>
        </view>
        <ve-gap size="100"></ve-gap>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty text="暂无待排车、待用车订单" v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>

    <!-- 二次确认 -->
    <ve-confirm titleText="提示" v-model="confirmVisible" @confirm="platoonCarFn">
      <view class="confirmCont">
        <view v-for="(it, i) in resultMsg" :key="i">{{ it }}</view>
        <view>请确认是否排车？</view>
      </view>
    </ve-confirm>
    <!-- 底部按钮 -->
    <ve-bottom-box size="mini" v-if="dataSource.length">
      <ve-button type="primary" size="long" @click="toConfirm">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'
  import OrderItem from './../components/order-item.vue'
  import { platoonCarCheck, platoonCar } from '@/api/asset/car-stock'

  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/sOrder/pageList',
    queryParam,
  )

  const platoonCarInfo = ref({
    licenseNo: '',
    modelName: '',
    startDate: '',
    carId: '',
  })

  // 选择
  const activedOrder = ref()
  const toSelect = (record: any) => {
    activedOrder.value = record
  }

  // 确认
  const resultMsg = ref([])
  const confirmVisible = ref(false)
  const toConfirm = () => {
    if (!activedOrder.value) {
      uni.showToast({
        icon: 'none',
        title: '请选择订单',
      })
      return
    }
    const record: any = activedOrder.value
    // 仅支持短租订单排车
    const useType = 2
    const params = {
      refId: record.id,
      startTime: record.startTime,
      endTime: record.endTime,
      useType,
      carId: platoonCarInfo.value.carId,
    }
    // 排车校验
    platoonCarCheck(params).then((res: any) => {
      const msgList = res.result.resultMsg || []
      if (msgList.length) {
        resultMsg.value = msgList
        confirmVisible.value = true
        return
      }
      platoonCarFn()
    })
  }

  // 排车
  const platoonCarFn = () => {
    const record: any = activedOrder.value
    const platoonType = record.orderStatus == 10 ? 1 : 2
    const params = {
      id: record.id,
      carId: platoonCarInfo.value.carId,
      carSource: record.carSource,
      type: platoonType, // 排车
    }
    platoonCar(params).then(() => {
      uni.$emit('carStock:loadData')
      // 返回上一页
      uni.navigateBack()
    })
  }

  onLoad((options) => {
    const info = options?.info
    const pc_Info = JSON.parse(info)
    platoonCarInfo.value = pc_Info
    queryParam.value = {
      carModelId: pc_Info.carModelId,
      platoonCarId: pc_Info.carId,
      startTimeBegin: pc_Info.startDate + ' 00:00:00',
      startTimeEnd: pc_Info.startDate + ' 23:59:59',
      orderStatusList: [10, 100],
      offlineOrHand: 1, // 线下或者手动订单
    }
    loadData()
  })
</script>

<style scoped lang="less">
  .car-block {
    margin: 24rpx 24rpx 0;
    padding: 32rpx;
    background-image: url('/static/images/carinfo-bc.png');
    background-size: cover;
    background-position: right top;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 8rpx;
    // 字
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;

    &_desc {
      margin: 16rpx 0;
    }

    &_title {
      font-size: 40rpx;
      font-weight: 600;
    }
  }

  .ve-bottom-box {
    height: auto;
  }

  .confirmCont {
    font-size: 28rpx;
    font-weight: 400;
    color: #191C27;
    line-height: 44rpx;
  }
</style>
